import React from "react";
import {
  Link
} from 'react-router-dom';

import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile';

import { getSwiperImg, getTenancyGroups, getNews } from '@/api'
import { getCurrentCity } from '@/utils'

import './index.scss'

import nav1 from '../../assets/images/nav-1.png'
import nav2 from '../../assets/images/nav-2.png'
import nav3 from '../../assets/images/nav-3.png'
import nav4 from '../../assets/images/nav-4.png'

class Home extends React.Component {
  state = {
    data: [],
    groups: [],
    news: [],
    currentCity: '定位',
    imgHeight: 176,
    isLoading: true
  }

  // 获取轮播图数据
  async _getSwiperImg() {
    const res = await getSwiperImg()
    this.setState({
      data: res.images_url,
      isLoading: false
    })
  }

  // 获取找房数据
  async _getTenancyGroups() {
    const res = await getTenancyGroups()
    this.setState({
      groups: res.tenancyGroups,
      isLoading: false
    })
  }

  // 获取最新资讯
  async _getNews() {
    const res = await getNews()
    this.setState({
      news: res.news,
      isLoading: false
    })
  }

  async _getOtherData() {
    await fetch(`${process.env.REACT_APP_BASE_API}/v2/explore_tabs?currency=CNY&is_standard_search=false&key=d306zoyjsyarp7ifhu67rjxn52tv0t20&locale=zh&metadata_only=true&tab_id=all_tab`)
      .then((response) => {
        return response.json()
      })
      .then((myJson) => {
        // console.log(myJson)
      })
  }

  async componentDidMount() {
    this._getSwiperImg()
    this._getTenancyGroups()
    this._getNews()
    this._getOtherData()
    const {name} = await getCurrentCity()
    this.setState({
      currentCity: name
    })
  }

  renderSwiper() {
    return this.state.data.map(val => (
      <a
        key={val}
        href="http://www.alipay.com"
        style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
      >
        <img
          src={val}
          alt=""
          style={{ width: '100%', verticalAlign: 'top' }}
          onLoad={() => {
            // fire window resize event to change height
            window.dispatchEvent(new Event('resize'));
            this.setState({ imgHeight: 'auto' });
          }}
        />
      </a>
    ))
  }

  renderNews() {
    return this.state.news.map(item => (
      <div className="news-item" key={item.id}>
        <div className="img-wrapper">
          <img className="img" src={item.imgSrc} alt=""/>
        </div>
        <Flex className="news-content" direction="column" justify="between">
          <h3 className="news-title">{item.title}</h3>
          <Flex className="news-info" justify="between">
            <p>{item.from}</p>
            <p>{item.date}</p>
          </Flex>
        </Flex>
      </div>
    ))
  }

  render() {
    return (
      <div className="home-container">
        <div className="swiper-container">
          <Flex className="search-wrapper" justify="between">
            <Flex className="" justify="between">
              <div className="location" onClick={() => this.props.history.push('/city-list')}>
                <span>{this.state.currentCity}</span>
                <i className="iconfont icon-arrow"/>
              </div>
              <div className="search">
                <i className="iconfont icon-seach" />
                <span>请输入小区地址</span>
              </div>
            </Flex>

            <div className="map-icon">
              <i className="iconfont icon-map" onClick={() => this.props.history.push('/map')} />
            </div>
          </Flex>
          {!this.state.isLoading && <Carousel
            autoplay={true}
            infinite
          >
            {this.renderSwiper()}
          </Carousel>}
        </div>

        <Flex className="nav-wrapper">
          <Flex.Item>
            <Link to="/home/house-list">
              <img src={nav1} alt=""/>
              <p>整租</p>
            </Link>
          </Flex.Item>
          <Flex.Item>
            <Link to="/home/house-list">
              <img src={nav2} alt=""/>
              <p>合租</p>
            </Link>
          </Flex.Item>
          <Flex.Item>
            <Link to="">
              <img src={nav3} alt=""/>
              <p>地图找房</p>
            </Link>
          </Flex.Item>
          <Flex.Item>
            <Link to="">
              <img src={nav4} alt=""/>
              <p>去出租</p>
            </Link>
          </Flex.Item>
        </Flex>
        <div className="tenancy-groups">
          <Flex justify="between" className="tenancy-groups-title">
            <h3>租房小组</h3>
            <span>更多</span>
          </Flex>
          <Grid className="groups-grid"
                data={this.state.groups}
                columnNum={2}
                activeStyle
                hasLine={false}
                square={false}
                renderItem={item => {
                  return <Flex justify="between" className="groups-grid-item">
                    <div>
                      <p>{item.title}</p>
                      <span>{item.desc}</span>
                    </div>
                    <div>
                      <img src={item.imgSrc} alt="" />
                    </div>
                  </Flex>
                }}/>
        </div>
        <div className="news">
          <h3 className="news-groups-title">最新资讯</h3>
          <WingBlank size="md">{this.renderNews()}</WingBlank>
        </div>
      </div>
    );
  }
}

export default Home
